<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>生命周期</h2>
      <p>{{ count }}</p>
      <button v-on:click="handleClick">btn</button>
    </div>

    <script src="../Vue.js"></script>
    <script>
      // 如果html里面没有用到的变量，尽量不要写在data里面
      let timer;

      new Vue({
        // el: "#app",
        data: {
          count: 1,
          list: [],
          // timer: null,
        },
        methods: {
          fn() {},
          handleClick() {
            this.count++;
          },
        },
        // template: `
        //   <div>123</div>
        // `,
        // 生命周期也是选项
        // 创建阶段和挂载阶段的生命周期是会自动执行
        // 生命周期的执行顺序和书写顺序无关

        // 创建阶段

        // vue自己会去初始化事件和生命周期

        beforeCreate() {
          // 在beforeCreate里面因为拿不到data，所以不能赋值，也就不能做数据请求
          console.log("beforeCreate", this.count, this.fn);
        },

        // vue自己会去初始化注入和响应式(初始化了data和methods等)

        created() {
          console.log("created", this.count, this.fn);
        },

        // vue会去判断是否有el选项
        // 判断是否有template选项

        // 挂载阶段
        beforeMount() {
          console.log("beforeMount", document.querySelector("#app").innerHTML);
        },

        // vue会去将虚拟dom替换成真实dom

        mounted() {
          console.log("mounted", document.querySelector("#app").innerHTML);

          timer = setInterval(() => {
            console.log(123);
          }, 1000);

          setTimeout(() => {
            // 卸载组件
            // 卸载的是响应式系统
            this.$destroy();
          }, 5000);
        },

        // 更新阶段
        // 需要data的数据发生改变的时候触发
        // 不是数据改变的前后, 而是虚拟dom重新渲染的前后
        // 数据改变和页面渲染不是同时发生的
        beforeUpdate() {
          console.log(
            "beforeUpdate",
            this.count,
            document.querySelector("#app").innerHTML
          );
        },
        updated() {
          // 在update里面，不要去改变数据，会造成死循环
          console.log(
            "updated",
            this.count,
            document.querySelector("#app").innerHTML
          );
        },

        // 销毁阶段
        // 关闭定时器, 关闭事件监听, websocket, 第三方插件
        beforeDestroy() {
          console.log("beforeDestroy");
          clearInterval(timer);
        },
        destroyed() {
          // 卸载后不做事情
          console.log("destroyed");
        },
      }).$mount("#app");
    </script>
  </body>
</html>
